<#assign baseURL = springMacroRequestContext.getContextPath() />
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拓深科技</title>
<#include "./css.ftl">
    <style type="text/css">
        .mapBall{
            width:20px;
            height:20px;
            background: red;
            border-radius: 50%;
            position: absolute;
        }
        .table>tbody>tr>td{
            text-align:center;
            line-height: 15px;
            font-size: 15px;
        }
        .table>thead:first-child>tr:first-child>th{
            text-align:center;
        }
        .bottom_location{
            width: 100%;
            position: absolute;
            top: 90px;
            bottom: 0px;
            left: 0px;
        }
    </style>
</head>
<body>
<div id="wrapper">

<#include "./left_nav.ftl">

    <div id="page-wrapper" class="gray-bg dashbard-1 animated fadeInRight">
    <#include "./top_nav.ftl">
        <div class="wrapper wrapper-content">
           <div class="row">

        <#if (role_type_id > 2)>
            <div class="widget red-bg p-lg text-center">
                <div class="m-b-lg">
                    <i class="fa fa-bell fa-4x" style="margin-bottom: 20px"></i>
                    <h1 class="font-bold no-margins">
                        权限不足
                    </h1>
                </div>
            </div>
        <#else >

            <div class="panel panel-default" style="margin-bottom: 0px">
                <div class="panel-heading">
                    <h4 class="panel-title"><b>未配置地图信息的监测点列表</b></h4>
                </div>
                <div class="panel-body">
                    <table id="monitor_no_map_table" class="table table-bordered table-striped" style="width: 100%">
                        <thead>
                        <tr>
                            <th>监测点名称</th>
                            <th>所属用户信息传输装置</th>
                            <th>用户信息传输装置IP</th>
                            <th>传感器类型</th>
                            <th>报警回路号</th>
                            <th>区域</th>
                            <th>建筑物</th>
                            <th>楼层</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="monitor_no_map_body">

                        </tbody>
                    </table>
                </div>
            </div>

        </#if>

           </div>
        </div>
    <#include "./bottom_nav.ftl">
    </div>

</div>


<#include "./js.ftl">

<#if (role_type_id > 2)>

<#else >

<script>
    var server = "http://"+getURL()+"${baseURL}";
    var globalX,globalY;
    var totalPage = 1;
    var pageIndex = 1;
    var totalNum;
    var monitorMapArr;

    $(function () {
        socketInit(server.substring(5));
        initMonitorTable();
    });

    function initMonitorTable() {
        monitorTable = $('#monitor_no_map_table').DataTable({
            columns:[
                {data: "monitor_name"},
                {data: "device_name"},
                {data: "device_ip"},
                {data: "sensor_name"},
                {data: "monitor_description"},
                {data: "geo_1"},
                {data: "geo_2"},
                {data: "geo_3"},
                {data: "id","width":"15%"}
            ],
            ajax:"${baseURL}/xkMonitor/getAllNoPos" ,
            columnDefs:[{
                targets:8,
                render: function (data, type, row, meta) {
                    return   '<div  class="col-sm-12" style="padding: 0 0 0 0;"><div class="col-sm-6" style="padding: 0 2px 0 0;"><button  onclick=editRecord('+data+','+row.geo_3_id+') type="button" class="btn btn-block btn-primary" style="padding: 0 0 0 0;"><i class="fa fa-map-marker"></i>&nbsp;设置坐标</button></div> <div class="col-sm-6" style="padding: 0 2px 0 0;"><button onclick="delMonitor('+data+')" type="button" class="btn btn-block btn-warning" style="padding: 0 0 0 0;"><i class="fa fa-trash"></i>&nbsp;&nbsp;删除</button></div></div>'
                }
            },
                {   'orderable': false,
                    'targets': 8
                }],

            language:{
                "sProcessing":   "处理中...",
                "sLengthMenu":   "显示 _MENU_ 项结果",
                "sZeroRecords":  "没有匹配结果",
                "sInfo":         "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                "sInfoEmpty":    "显示第 0 至 0 项结果，共 0 项",
                "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                "sInfoPostFix":  "",
                "sSearch":       "搜索:",
                "sUrl":          "",
                "sEmptyTable":     "表中数据为空。",
                "sLoadingRecords": "载入中...",
                "sInfoThousands":  ",",
                "oPaginate": {
                    "sFirst":    "首页",
                    "sPrevious": "上页",
                    "sNext":     "下页",
                    "sLast":     "末页"
                },
                "oAria": {
                    "sSortAscending":  ": 以升序排列此列",
                    "sSortDescending": ": 以降序排列此列"
                }
            }
        });
    }


    function editRecord(id,geo_3_id) {
        var posX = 0;
        var posY = 0;
        layer.open({
            type: 1,
            title:'设定监测点坐标',
            skin:'layui-layer-lan',
            area:['1000px', '100%'],
            shade:false,
            maxmin:true,
            maxHeight:'1000px',
            scrollbar: false,
            content:'<div class="tab-pane" id="tab_0" style="width:100%;height:100%;margin-left: 0px">'
            +'  <div class="row" style="width:100%;height: 100%;margin-left: 0px">'
            +'              <div id="change_monitor_box_body" style="width:100%;height: 100%;margin-left: 0px">'
            +'                  <div class="row" style="width:100%;margin-left: 0px;height: 90px;padding:0px 0px 0px 10px">'
            +'                      <div class="col-sm-6"style="height: 100%">'
            +'                          <div class="form-group">'
            +'                              <label>监测点X坐标</label>'
            +'                              <input id="monitor_change_pos_x_input"  class="form-control" disabled>'
            +'                          </div>'
            +'                      </div>'
            +'                      <div class="col-sm-6 "style="height: 100%">'
            +'                          <div class="form-group">'
            +'                              <label>监测点Y坐标</label>'
            +'                              <input id="monitor_change_pos_y_input" type="text" class="form-control" disabled>'
            +'                          </div>'
            +'                      </div>'
            +'                  </div>'
            +'                  <div style="margin-left: 0px" class="bottom_location">'
            +'                      <div id="monitor_change_map_div" style="width:100%;height: 100%;">'
            +'                      </div>'
            +'                  </div>'
            +'      </div>'
            +'  </div>'
            +'</div>'
            ,
            btn:['保存','取消'],
            btn1: function (index,layero) {
                posX = $('#monitor_change_pos_x_input').val();
                posY = $('#monitor_change_pos_y_input').val();
                var formDatas = new FormData();
                formDatas.append("id",id);
                formDatas.append("x",posX);
                formDatas.append("y",posY);
                $.ajax({
                    type:"post",
                    contentType : false,
                    processData:false,
                    url: "${baseURL}/xkMonitor/updatePos" ,
                    data:formDatas,
                    success:function () {
                        layer.alert('数据修改成功！',{
                            closeBtn: 0
                        });
                        monitorTable.ajax.reload();
                    }
                });
            },
            btn2:function (index,layero) {
            },
            success: function(){
                $("#monitor_change_pos_x_input").val(posX);
                $("#monitor_change_pos_y_input").val(posY);
                $('#monitor_change_map_div').empty();
                var imgs = "";
                imgs = '<img id="show_map" style="width: 100%;height: 100%;"  class="ip_tooltipImg"  src="${baseURL}/xkGeoLocationMap/mapDownload?id='+geo_3_id+'" onclick="mapOnClick2(event)" />';
                $('#monitor_change_map_div').append(imgs);
                var w = $('#monitor_change_map_div').width();
                var h = $('#monitor_change_map_div').height();
            }
        });
    }

    function delMonitor(id) {
        var index = layer.load(0, {shade: false});
        $.ajax({
            url:'${baseURL}/xkMonitor/delete?id=' + id,
            success:function (data) {
                layer.alert('数据删除成功！',{
                    closeBtn: 0
                });
                monitorTable.ajax.reload();
                layer.close(index);
            }
        });
    }
    function mapOnClick2(e){
        e = e || window.event;
        var imgId ='#'+ $(e.target).attr('id');
        var currentWidth = $(imgId).width();
        var currentHeight = $(imgId).height();
        var offsetX = e.pageX - $(imgId).offset().left;
        var offsetY = e.pageY - $(imgId).offset().top;
        var x = offsetX / currentWidth;
        var y = offsetY / currentHeight;
        $('#monitor_change_pos_x_input').val(x.toFixed(10));
        $('#monitor_change_pos_y_input').val(y.toFixed(10));
        var spans = document.getElementsByClassName("mapBall");
        if(spans.length>0){
            $("#monitor_change_map_div .mapBall").remove();
        }
        posSetBall2(x,y)
    }
    function posSetBall2(x,y) {
        var pos_x = (parseFloat(x) * 100);
        pos_x = pos_x>0?pos_x+'%':0;
        var pos_y = (parseFloat(y) * 100);
        pos_y = pos_y>0?pos_y+'%':0;
        $('<span class="mapBall ip_tooltip" style="top:calc('+pos_y+' - 10px);left: calc('+pos_x+' - 10px")>').css({
            width: 20,
            height: 20,
        }).appendTo($('#monitor_change_map_div '));
    }
</script>

</#if>
</body>
</html>